<template>
  <div
    class="window"
    :id="`window-${app.appId}`"
    v-if="visible"
    v-show="app.open && !app.min"
    v-drag
    :style="{
      width: `${app.width}px`,
      height: `${app.height}px`
    }"
  >
    <topbar
      :title="app.title"
      @close="closeApp(app.appId)"
      @min="minApp(app.appId)"
      @max="maxApp(app.appId)"
    />
    <window-body>
      <slot></slot>
    </window-body>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
import Topbar from './Topbar.vue'
import WindowBody from './WindowBody.vue';
export default {
  components: { Topbar, WindowBody },

  props: {
    visible: {
      type: Boolean,
      defalut: false
    },
    app: {
      type: Object,
      rquired: true,
      default: () => { }
    }
  },
  methods: {
    ...mapActions(['closeApp', 'minApp', 'maxApp'])
  },

}
</script>

<style lang="less" scoped>
.window {
  position: fixed;
  top: 50%;
  transform: translate(-50%, -60%);
  left: 50%;
  border-radius: 10px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 50px rgb(82, 78, 85);

  border: solid 1px rgb(82, 78, 85);
}
</style>